<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
    <title>选项卡式导航</title>
    <style type="text/css">
        <!--
        * {
            margin: 0; padding:0
        }
        body {
            margin-top: 10px;
            margin-right: auto;
            margin-bottom: 10px;
            margin-left: auto;
            text-align: center;
            height: auto;
            width: auto;
            background-color: #666666;
            font-size: 12px;
            color: #000000;
        }
        #container {
            text-align: left;
            width: 760px;
            height: 400px;
            background-color: #FFFFFF;
            padding: 20px;
        }
        #container #title {
            height: 28px;
        }
        #container #title li {
            float: left;
            list-style-type: none;
            height: 28px;
            line-height: 28px;
            text-align: center;
            margin-right: 1px;
        }
        #container #title ul {
            background-color: #FFFFFF;
            height: 28px;
        }
        #container #title a {
            text-decoration: none;
            color: #000000;
            display: block;
            width: auto;
            background: url(http://p1.mb5u.com/texiao/2010052300481145.gif) no-repeat left -29px;
        }
        #container #title a span{
            display: block;
            background: url(http://p1.mb5u.com/texiao/2010052300481144.gif) no-repeat right -29px;
            padding: 0 15px 0 15px;
        }
        #container #title #tag1 a:hover {
            text-decoration: none;
            color: #ffffff;
            display: block;
            width: auto;
            background: url(http://p1.mb5u.com/texiao/2010052300481145.gif) no-repeat left -87px;
        }
        #container #title #tag1 a:hover span{
            display: block;
            background: url(http://p1.mb5u.com/texiao/2010052300481144.gif) no-repeat right -87px;
            padding: 0 15px 0 15px;
        }
        #container #title #tag2 a:hover {
            text-decoration: none;
            color: #ffffff;
            display: block;
            width: auto;
            background: url(http://p1.mb5u.com/texiao/2010052300481145.gif) no-repeat left 0px;
        }
        #container #title #tag2 a:hover span{
            display: block;
            background: url(http://p1.mb5u.com/texiao/2010052300481144.gif) no-repeat right 0px;
            padding: 0 15px 0 15px;
        }
        #container #title #tag3 a:hover {
            text-decoration: none;
            color: #ffffff;
            display: block;
            width: auto;
            background: url(http://p1.mb5u.com/texiao/2010052300481145.gif) no-repeat left -58px;
        }
        #container #title #tag3 a:hover span{
            display: block;
            background: url(http://p1.mb5u.com/texiao/2010052300481144.gif) no-repeat right -58px;
            padding: 0 15px 0 15px;
        }
        #container #title #tag4 a:hover {
            text-decoration: none;
            color: #ffffff;
            display: block;
            width: auto;
            background: url(http://p1.mb5u.com/texiao/2010052300481145.gif) no-repeat left -145px;
        }
        #container #title #tag4 a:hover span{
            display: block;
            background: url(http://p1.mb5u.com/texiao/2010052300481144.gif) no-repeat right -145px;
            padding: 0 15px 0 15px;
        }
        #container #title #tag5 a:hover {
            text-decoration: none;
            color: #ffffff;
            display: block;
            width: auto;
            background: url(http://p1.mb5u.com/texiao/2010052300481145.gif) no-repeat left -174px;
        }
        #container #title #tag5 a:hover span{
            display: block;
            background: url(http://p1.mb5u.com/texiao/2010052300481144.gif) no-repeat right -174px;
            padding: 0 15px 0 15px;
        }
        #container #title .selectli1 {
            text-decoration: none;
            color: #ffffff;
            display: block;
            width: auto;
            background: url(http://p1.mb5u.com/texiao/2010052300481145.gif) no-repeat left -87px;
        }
        #container #title a .selectspan1 {
            display: block;
            background: url(http://p1.mb5u.com/texiao/2010052300481144.gif) no-repeat right -87px;
            padding: 0 15px 0 15px;
        }
        #container #title .selectli2 {
            text-decoration: none;
            color: #ffffff;
            display: block;
            width: auto;
            background: url(http://p1.mb5u.com/texiao/2010052300481145.gif) no-repeat left 0px;
        }
        #container #title a .selectspan2 {
            display: block;
            background: url(http://p1.mb5u.com/texiao/2010052300481144.gif) no-repeat right 0px;
            padding: 0 15px 0 15px;
        }
        #container #title .selectli3 {
            text-decoration: none;
            color: #ffffff;
            display: block;
            width: auto;
            background: url(http://p1.mb5u.com/texiao/2010052300481145.gif) no-repeat left -58px;
        }
        #container #title a .selectspan3 {
            display: block;
            background: url(http://p1.mb5u.com/texiao/2010052300481144.gif) no-repeat right -58px;
            padding: 0 15px 0 15px;
        }
        #container #title .selectli4 {
            text-decoration: none;
            color: #ffffff;
            display: block;
            width: auto;
            background: url(http://p1.mb5u.com/texiao/2010052300481145.gif) no-repeat left -145px;
        }
        #container #title a .selectspan4 {
            display: block;
            background: url(http://p1.mb5u.com/texiao/2010052300481144.gif) no-repeat right -145px;
            padding: 0 15px 0 15px;
        }
        #container #title .selectli5 {
            text-decoration: none;
            color: #ffffff;
            display: block;
            width: auto;
            background: url(http://p1.mb5u.com/texiao/2010052300481145.gif) no-repeat left -174px;
        }
        #container #title a .selectspan5 {
            display: block;
            background: url(http://p1.mb5u.com/texiao/2010052300481144.gif) no-repeat right -174px;
            padding: 0 15px 0 15px;
        }
        #container #mrc ul {margin: 10px;}
        #container #mrc li {margin: 5px; }
        #container #mrc li img {margin: 5px;display:block;}
        #container #mrc {
            height: 300px;
            padding: 10px;
        }
        .mrc1 {
            border-top-width: 3px;
            border-right-width: 1px;
            border-bottom-width: 1px;
            border-left-width: 1px;
            border-top-style: solid;
            border-right-style: solid;
            border-bottom-style: solid;
            border-left-style: solid;
            border-top-color: #3A81C8;
            border-right-color: #3A81C8;
            border-bottom-color: #3A81C8;
            border-left-color: #3A81C8;
            background-color: #DFEBF7;
        }
        .mrc2 {
            border-top-width: 3px;
            border-right-width: 1px;
            border-bottom-width: 1px;
            border-left-width: 1px;
            border-top-style: solid;
            border-right-style: solid;
            border-bottom-style: solid;
            border-left-style: solid;
            border-top-color: #ff950b;
            border-right-color: #ff950b;
            border-bottom-color: #ff950b;
            border-left-color: #ff950b;
            background-color: #FFECD2;
        }
        .mrc3 {
            height: 300px;
            padding: 10px;
            border-top-width: 3px;
            border-right-width: 1px;
            border-bottom-width: 1px;
            border-left-width: 1px;
            border-top-style: solid;
            border-right-style: solid;
            border-bottom-style: solid;
            border-left-style: solid;
            border-top-color: #FE74B8;
            border-right-color: #FE74B8;
            border-bottom-color: #FE74B8;
            border-left-color: #FE74B8;
            background-color: #FFECF5;
        }
        .mrc4 {
            height: 300px;
            padding: 10px;
            border-top-width: 3px;
            border-right-width: 1px;
            border-bottom-width: 1px;
            border-left-width: 1px;
            border-top-style: solid;
            border-right-style: solid;
            border-bottom-style: solid;
            border-left-style: solid;
            border-top-color: #00988B;
            border-right-color: #00988B;
            border-bottom-color: #00988B;
            border-left-color: #00988B;
            background-color: #E8FFFD;
        }
        .mrc5 {
            height: 300px;
            padding: 10px;
            border-top-width: 3px;
            border-right-width: 1px;
            border-bottom-width: 1px;
            border-left-width: 1px;
            border-top-style: solid;
            border-right-style: solid;
            border-bottom-style: solid;
            border-left-style: solid;
            border-top-color: #A8BC1F;
            border-right-color: #A8BC1F;
            border-bottom-color: #A8BC1F;
            border-left-color: #A8BC1F;
            background-color: #F7FAE2;
        }
        .hidemrc {display:none;}
        -->
    </style>
    <script language="javascript">
        function switchTag(tag,mrc)
        {
//	alert(tag);
//	alert(mrc);
            for(i=1; i <6; i++)
            {
                if ("tag"+i==tag)
                {
                    document.getElementById(tag).getElementsByTagName("a")[0].className="selectli"+i;
                    document.getElementById(tag).getElementsByTagName("a")[0].getElementsByTagName("span")

                        [0].className="selectspan"+i;
                }else{
                    document.getElementById("tag"+i).getElementsByTagName("a")[0].className="";
                    document.getElementById("tag"+i).getElementsByTagName("a")[0].getElementsByTagName("span")

                        [0].className="";
                }
                if ("mrc"+i==mrc)
                {
                    document.getElementById(mrc).className="";
                }else{
                    document.getElementById("mrc"+i).className="hidemrc";
                }
                document.getElementById("mrc").className=mrc;
            }
        }
    </script>
</head>
<body>
<div id="container">
    <div id="title">
        <ul>
            <li id="tag1"><a href="#" onclick="switchTag('tag1','mrc1');this.blur();" class="selectli1"><span

                    class="selectspan1">首页</span></a></li>
            <li id="tag2"><a href="#" onclick="switchTag('tag2','mrc2');this.blur();"><span>下载中心</span></a></li>
            <li id="tag3"><a href="#" onclick="switchTag('tag3','mrc3');this.blur();"><span>产品介绍</span></a></li>
            <li id="tag4"><a href="#" onclick="switchTag('tag4','mrc4');this.blur();"><span>会员注册与登录</span></a></li>
            <li id="tag5"><a href="#" onclick="switchTag('tag5','mrc5');this.blur();"><span>联系我们</span></a></li>
        </ul>  </div>
    <div id="mrc" class="mrc1">
        <div id="mrc1"><p>仿淘宝网站的导航效果。此方法有几个优点：</p>1、根据字数自适应项目长度</div>
        <div id="mrc2" class="hidemrc">2、不同的项目使用不同的颜色来区分</div>
        <div id="mrc3" class="hidemrc">3、这回需要使用到js了，呵呵</div>
        <div id="mrc4" class="hidemrc">4、背景图片只需要两个图片文件就足够，减少服务器负担</div>
        <div id="mrc5" class="hidemrc">5、这是使用到的两个图片：
            <table width="58%" border="1" cellspacing="2" cellpadding="0">
                <tr>
                    <td width="70%" align="center"><img src="http://p1.mb5u.com/texiao/2010052300481144.gif"  width="250" height="290" /></td>
                    <td width="30%" align="center"><img src="http://p1.mb5u.com/texiao/2010052300481144.gif" width="15" height="290" /></td>
                </tr>
            </table>
        </div>
    </div>
</div>
</body>
</html>

